<script lang="ts" setup>
defineOptions({
	name: 'CurrencyTest'
})

const currencyStore = useCurrencyStore()
const { getCurrentCurrency, getCurrentCurrencyInfo, formatAmount, getCurrencies } =
	storeToRefs(currencyStore)

const testAmount = ref(100)
const conversionAmount = ref(100)
const targetCurrency = ref<'CNY' | 'USD' | 'RUB'>('USD')

const formatTestAmount = () => {
	return formatAmount.value(testAmount.value)
}

const convertAmount = () => {
	return currencyStore.convertAmount(conversionAmount.value, targetCurrency.value)
}

const getExchangeRate = () => {
	return currencyStore.getExchangeRate(targetCurrency.value)
}
</script>

<template>
	<IsGuest>
		<div class="p-4">
			<h1 class="text-2xl font-bold mb-6">币种选择功能测试</h1>

			<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
				<!-- 当前币种信息 -->
				<a-card title="当前币种信息" class="shadow-sm">
					<div class="space-y-4">
						<div class="flex justify-between">
							<span class="font-medium">当前币种:</span>
							<span class="text-blue-600">
								{{ getCurrentCurrencyInfo.name }} ({{
									getCurrentCurrencyInfo.code
								}})
							</span>
						</div>
						<div class="flex justify-between">
							<span class="font-medium">货币符号:</span>
							<span class="text-lg">{{ getCurrentCurrencyInfo.symbol }}</span>
						</div>
						<div class="flex justify-between">
							<span class="font-medium">汇率:</span>
							<span>
								1 CNY = {{ getCurrentCurrencyInfo.rate }}
								{{ getCurrentCurrencyInfo.code }}
							</span>
						</div>
					</div>
				</a-card>

				<!-- 金额格式化测试 -->
				<a-card title="金额格式化测试" class="shadow-sm">
					<div class="space-y-4">
						<div class="flex items-center gap-2">
							<a-input-number
								v-model:value="testAmount"
								:min="0"
								:step="10"
								class="flex-1" />
							<span class="text-gray-600">CNY</span>
						</div>
						<div class="p-3 bg-gray-50 rounded">
							<div class="text-sm text-gray-600">格式化结果:</div>
							<div class="text-xl font-bold text-green-600">
								{{ formatTestAmount() }}
							</div>
						</div>
					</div>
				</a-card>

				<!-- 币种转换测试 -->
				<a-card title="币种转换测试" class="shadow-sm">
					<div class="space-y-4">
						<div class="flex items-center gap-2">
							<a-input-number
								v-model:value="conversionAmount"
								:min="0"
								:step="10"
								class="flex-1" />
							<span class="text-gray-600">CNY</span>
						</div>
						<div class="flex items-center gap-2">
							<span class="text-gray-600">转换为:</span>
							<a-select v-model:value="targetCurrency" class="flex-1">
								<a-select-option value="USD">美元 (USD)</a-select-option>
								<a-select-option value="RUB">卢布 (RUB)</a-select-option>
							</a-select>
						</div>
						<div class="p-3 bg-gray-50 rounded">
							<div class="text-sm text-gray-600">转换结果:</div>
							<div class="text-xl font-bold text-blue-600">
								{{ convertAmount().toFixed(2) }} {{ targetCurrency }}
							</div>
							<div class="text-sm text-gray-500 mt-1">
								汇率: 1 CNY = {{ getExchangeRate().toFixed(4) }}
								{{ targetCurrency }}
							</div>
						</div>
					</div>
				</a-card>

				<!-- 所有可用币种 -->
				<a-card title="所有可用币种" class="shadow-sm">
					<div class="space-y-3">
						<div
							v-for="currency in getCurrencies"
							:key="currency.code"
							class="flex justify-between items-center p-2 border-b border-gray-100">
							<div class="flex items-center gap-2">
								<span class="text-lg">{{ currency.symbol }}</span>
								<div>
									<div class="font-medium">{{ currency.name }}</div>
									<div class="text-sm text-gray-500">{{ currency.code }}</div>
								</div>
							</div>
							<div class="text-sm text-gray-600">汇率: {{ currency.rate }}</div>
						</div>
					</div>
				</a-card>
			</div>

			<!-- 使用说明 -->
			<a-card title="使用说明" class="mt-6 shadow-sm">
				<div class="space-y-2 text-gray-700">
					<p>• 币种切换组件已添加到页面右上角，位于语言切换组件旁边</p>
					<p>• 当前支持人民币(CNY)、美元(USD)、卢布(RUB)</p>
					<p>• 币种设置会自动保存到本地存储</p>
					<p>
						• 可以使用
						<code>formatAmount(amount)</code>
						方法格式化金额
					</p>
					<p>
						• 可以使用
						<code>convertAmount(amount, targetCurrency)</code>
						方法转换金额
					</p>
					<p>
						• 可以使用
						<code>getExchangeRate(targetCurrency)</code>
						方法获取汇率
					</p>
				</div>
			</a-card>
		</div>
	</IsGuest>
</template>

<style scoped>
.code {
	@apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}
</style>
